<template>
    <div v-loading="loading1" style="background:#A9AAAC;height:100%;width: 100%;padding:20px;margin;0px;font-size:15px;"  >
        <h1 style="text-align:center;margin:auto;">应急配电板</h1>
        <div style="display:grid; grid-template-columns: repeat(4, 1fr);">
            <div v-for="(item,index) in data" :key="index" style="justify-content: spaceAround;display:flex;text-align:left;align-items:left;padding:20px;">
               <div :class="{'alarmDiv':getFlash(item) }"  :style="{'width':'20px','height':'20px','border-radius':'50%','background':getColor(item)}"></div>
                <div :style="{'margin-left':'10px',color:getColorName(item)}">{{item.deviceName}}</div>
             </div>
        </div>
    </div>
</template>
<script>
import {listDevs} from  "@/api/system/device";
import { mapState } from "vuex";
export default {
 name: "emergencyBoard",
 created() {
    if(!this.timer){
    this.timer = setInterval(() => {
        this.init()
    }, 3000);//3秒刷新次
 }else{
    this.init()
 }
 },
 beforeDestroy() {

if(this.timer){
    clearInterval(this.timer);
    this.timer=null;
  }
},
 computed: {
  ...mapState("app", {   // 对象形式
      alarmList: "alarmList",
      lightSwitch:"lightSwitch",
      extExpSwitch:"extExpSwitch"
  })
},
 methods:{

    getFlash(row){
        //2、报警消息时，闪烁
        let f = this.alarmList.some(alarm=>
            alarm ==row.deviceId
        );
        if(f){
          if(row.displayAlarm=="2"){//告警
            return true;
          }
        }
        if(this.lightSwitch=='1'  ||this.extExpSwitch=="1")
        {//1、试灯打开
          // console.log("extExpSwitch=="+this.extExpSwitch)
          if(row.displayAlarm=="2"){//告警
            return true;
          }
        }
          return false;
      },
      getColorName(row){
        //告警消息
        if("2"== row.displayAlarm){
            let f = this.alarmList.some(alarm=>
            alarm ==row.deviceId
            );
            if(f){
                return 'red';
            }
            //3、显示设备状态颜色
            if(row.warnStatus=='1'||row.warnStatus=='0'){
                return 'black';
            }
            return 'red'
        }
        return "black";
        
      },
      getColor(row){
        if("2"== row.displayAlarm){  //告警类型
          //告警消息
          let f = this.alarmList.some(alarm=>
            alarm ==row.deviceId
          );
          if(f){//2、有报警通知，则显示灯的颜色
            return row.lightColor;
          }
        }
        if(this.lightSwitch=='1' ||this.extExpSwitch=="1"){//1、试灯打开，显示灯的颜色
            console.log("extExpSwitch=="+this.extExpSwitch)
            return row.lightColor;
        }
        //3、显示设备状态颜色
        if(row.warnStatus=='1'||row.warnStatus=='0'){
          return 'grey';
        }
          return row.lightColor;
      },
    init(){
        
        listDevs({"deptId":this.deptId}).then(response=>{
          this.loading1=false
        console.log(response)
        let dataArr =response.data;
        this.data =dataArr;
            
        })
  },
 
   
 },
 data(){
   return{
       loading1:true,
       loading :false,
       total: 0,
       data:[],
        timer:null,
        deptId:this.$route.query.depCode,
 }
}
}
</script>
<style scoped>


.tip {
 margin: 2px;
   padding: 1px;
   color: rgb(52 88 124 / 75%);

   border-radius: 20% 0% 40% 0%;
   background-color: rgb(122 132 216 / 19%);
   position: absolute;float:left;margin: 2px;
}

.el-row {
   margin-bottom: 20px;

 }
 .el-col {
   border-radius: 4px;
 }
 .bg-purple-dark {
   background: #99a9bf;
 }
 .bg-purple {
   background: #d3dce6;
 }
 .bg-purple-light {
   background: #e5e9f2;
 }
 .grid-content {
   border-radius: 4px;
   min-height: 36px;
 }

.parent {
 display: flex;
 flex-wrap: wrap;
 flex-direction: row;
}
.child{
 flex-basis: 20%;
}
.alarmDiv{
      display:block;
      -webkit-animation-name: imageAnim;
      -webkit-animation-duration: 0.5s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-direction: alternate;
      -webkit-animation-timing-function: ease;
      -webkit-animation-play-state: running;
  }
  @-webkit-keyframes imageAnim{
      0% {opacity: 1;}
      50% {opacity: 0.5;}
      100% {opacity: 0;}
  }
</style>
